<template>
  <div style="height: 500px">
    <div ref="gantt" style="height: 100%"></div>
  </div>
</template>
<script>
import { gantt } from "dhtmlx-gantt";
import dayjs from "dayjs";
export default {
  name: "GanttChart",
  props: {
    tasks: {
      type: Object,
      default() {
        return { data: [], links: [] };
      },
    },
  },
  data() {
    return {
      title: "",
      width: 800,
      visible: false,
      disablesubmit: false,
    };
  },
  methods: {
    initGantt() {
      //日期格式化
      gantt.config.xml_date = "%Y-%m-%d";
      //左侧是否自适应
      gantt.config.autofit = true;
      //左侧宽
      gantt.config.grid_width = 500;
      //取消连线
      gantt.config.drag_links = false;
      //只读
      gantt.config.readonly = false;
      //右侧显示列名
      gantt.config.date_scale = "%Y-%m-%d";
      //自动调整图表坐标轴区间用于适配task的长度
      gantt.config.fit_tasks = true;
      //弹窗宽
      gantt.config.wide_form = false;

      //左侧显示列名
      gantt.config.columns = [
        { name: "text", label: "计划名称", tree: true, width: "*" },
        { name: "start_date", label: "开始时间", align: "center" },
        { name: "end_date", label: "结束时间", align: "center" },
        {
          name: "progress",
          label: "进度",
          align: "center",
          template: function (obj) {
            return Math.floor(obj.progress * 100).toString() + "%";
          },
        },
        { name: "add", label: "" },
      ];
      //弹出层
      gantt.config.lightbox.sections = [
        {
          name: "text",
          height: 70,
          map_to: "text",
          type: "textarea",
          focus: true,
          width: 200,
        },
        {
          name: "time",
          height: 30,
          map_to: "auto",
          type: "time",
          time_format: ["%Y", "%m", "%d"],
        },
        {
          name: "color",
          height: 30,
          map_to: "color",
          type: "select",
          options: [
            { key: "#3db9d3", label: "蓝色" },
            { key: "#33cc33", label: "绿色" },
            { key: "#FF8247", label: "橙色" },
            { key: "#ff6633", label: "红色" },
          ],
        },
        {
          name: "description",
          height: 70,
          map_to: "description",
          type: "textarea",
        },
      ];
      //弹窗标题 日期范围
      gantt.templates.task_time = function (start, end, task) {
        return (
          dayjs(start).format("YYYY-MM-DD") +
          " - " +
          dayjs(end).format("YYYY-MM-DD")
        );
      };
      //弹窗标题 计划名称
      gantt.templates.task_text = function (start, end, task) {
        return task.text || "";
      };

      gantt.config.scale_unit = "year";
      gantt.config.step = 1;
      gantt.config.date_scale = "%Y-%m";
      //当右侧不止显示年份时，可以添加展示月日，添加一个就加一行
      gantt.config.subscales = [{ unit: "day", step: 1, date: "%d" }];
      //甘特图右侧表头的高度
      gantt.config.scale_height = 80;
      //使用中文
      gantt.i18n.setLocale("cn");

      gantt.init(this.$refs.gantt);
      gantt.parse(this.$props.tasks);
      let this_ = this;
      //添加后触发
      gantt.attachEvent("onAfterTaskAdd", function (id, item) {
        console.log("添加后触发");
        this_.changeTask();
      });
      //移动进度后触发
      gantt.attachEvent("onAfterTaskDrag", function (id, mode, e) {
        console.log("移动进度后触发");
        this_.changeTask();
      });
      //移动任务后触发
      gantt.attachEvent("onAfterTaskMove", function (id, parent, tindex) {
        console.log("移动任务后触发");
        this_.changeTask();
      });
      //删除任务后触发
      gantt.attachEvent("onAfterTaskDelete", function (id, item) {
        console.log("删除任务后触发");
        this_.changeTask();
      });
      //修改任务后触发
      gantt.attachEvent("onAfterTaskUpdate", function (id, item) {
        console.log("修改任务后触发");
        this_.changeTask();
      });
      //保存验证
      gantt.attachEvent("onLightboxSave", function (id, item) {
        if (!item.text) {
          gantt.message({ type: "error", text: "请填写计划名称!" });
          return false;
        }
        return true;
      });
    },
    changeTask() {
      const taskCount = gantt.getTaskCount();
      let taskData = [];
      //let openTask = [];
      for (let i = 0; i < taskCount; i++) {
        let taskOne = {};
        const obj = gantt.getTaskByIndex(i);
        //打开状态继续打开
        /*  if (obj.$open == true) {
          openTask.push(obj.id);
        } */
        //整理数据格式
        taskOne.id = obj.id;
        taskOne.text = obj.text;
        taskOne.start_date = dayjs(obj.start_date).format("YYYY-MM-DD");
        taskOne.end_date = dayjs(obj.end_date).format("YYYY-MM-DD");
        taskOne.duration = obj.duration;
        taskOne.progress = obj.progress;
        taskOne.description = obj.description;
        taskOne.color = obj.color;
        if (obj.parent) {
          taskOne.parent = obj.parent;
        }
        taskData.push(taskOne);
      }
      this.$props.tasks.data = taskData;
      //清空数据
      gantt.clearAll();
      //加载
      gantt.parse(this.$props.tasks);
      //遍历打开，使之前打开的父级继续打开
      // openTask.forEach((id) => {
      //   gantt.open(id);
      // });
    },
  },
};
</script>

<style>
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>
